/* create by zgt */
@import "../../scssMixin/generateClassName2.module.scss";
@import "../vars.module.scss";
//定义了一种 类似key:value得排版方式 来显示 字段信息
$--label-color: $heading-color;
$border-color: #ebeff3;
$bg-color: #f9f9f9;
$--p: 10px;
//z-info

@include z("info", $global: true) {
	position: relative;
	display: flex;

	margin: 0;
	min-height: 100%;
	@include is("border-right") {
		border-right: 1px solid $border-color;
	}
	@include is("border") {
		border: 1px solid $border-color;
	}
	@at-root {
		@include z("info-left", $global: true) {
			position: relative;
			color: $--label-color;
			margin: 0;
			width: 120px;
			padding: $--p 16px 0px;
			display: flex;
			align-items: center;
			align-self: auto;
			font-weight: 600;
			// border-right: 1px solid $border-color;
			background-color: $bg-color;
		}
		//z-info-right
		@include z("info-right", $global: true) {
			position: relative;
			margin: 0;
			padding: $--p 16px 0px;
			flex: 1;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			align-self: auto;
			white-space: normal;
			word-break: break-all;
		}
		@include z("span", $global: true) {
			margin-bottom: $--p;
		}
	}
}
:global {
	.z-info-wrapper {
		border: 1px solid $border-color;
	}
	.z-info + .z-info {
		border-top: 1px solid $border-color;
	}
}
